
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                template="/mobile/templates/blankPageTemp.xhtml"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pm="http://primefaces.org/mobile" 
                xmlns:rich="http://richfaces.org/rich"
                xmlns:a4j="http://richfaces.org/a4j">

    <ui:define name="page">
        <f:facet name="postinit">
            <h:outputScript library="primefaces" name="gmap/gmap.js" />
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
            <script type="text/javascript">
                function findMe() {
                    navigator.geolocation.getCurrentPosition(
                            function(position) {
                                var map = PF('gmap').getMap(),
                                        latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                                map.setCenter(latlng);
                                var marker = new google.maps.Marker({
                                    position: latlng
                                });
                                var marker2 = new google.maps.Marker({
                                    position: new google.maps.LatLng(51.109158, 17.072294)
                                });
                                marker.setMap(map);
                                marker2.setMap(map);
                                var request = {
                                    origin: marker.getPosition(),
                                    destination: marker2.getPosition(),
                                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                                
                                };
                                var directionsService = new google.maps.DirectionsService();
                                var directionsRenderer = new google.maps.DirectionsRenderer({suppressMarkers: true});
          directionsRenderer.setMap(map);
                                directionsService.route(request, function(result, status) {
                                    if (status == google.maps.DirectionsStatus.OK) {
                              
                                        directionsRenderer.setDirections(result);
                                    }
                                });
                            },
                            function(error) {
                                alert(error.message);
                            },
                            {
                                enableHighAccuracy: true
                            });
                }

            </script>
        </f:facet>

        <!-- Main View -->
        <pm:view id="main" swatch="a">
            <pm:header title="Maps">

            </pm:header>

            <pm:content>
                <p:gmap center="51.109158, 17.072294" zoom="15" type="MAP" style="width:100%;height:15em" widgetVar="gmap" model="#{gmap.simpleModel}"/>

                <p:separator />

                <p:commandButton type="button" value="Trasa" onclick="findMe()"/>
            </pm:content>

        </pm:view>
    </ui:define>
</ui:composition>